﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MenuContext.aspx.cs" Inherits="MotelClient.MenuContext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo menu context</title>
    <style type="text/css">
        #container
        {
            position: relative;
            height: 700px;
        }
        #directions
        {
            position: absolute;
            width: 23%;
            right: 1%;
            height: 690px;
            overflow: auto;
        }
        #googleMap
        {
            border: 1px dashed #C0C0C0;
            width: 75%;
            height: 700px;
        }
        #menu
        {
            background-color: #FFFFFF;
            width: 170px;
            height: 150px;
            padding: 0px;
            border: 1px;
            cursor: pointer;
            border-left: 1px solid #cccccc;
            border-top: 1px solid #cccccc;
            border-right: 1px solid #676767;
            border-bottom: 1px solid #676767;
        }
        #menu .item
        {
            font-family: arial,helvetica,sans-serif;
            font-size: 12px;
            text-align: left;
            line-height: 30px;
            border-left: 0px;
            border-top: 0px;
            border-right: 0px;
            padding-left: 30px;
            background-repeat: no-repeat;
            background-position: 4px center;
        }
        #menu .item.itemA
        {
            background-image: url(/Image/menu/icon_greenA.png);
        }
        #menu .item.itemB
        {
            background-image: url(/Image/menu/icon_greenB.png);
        }
        #menu .item.zoomIn
        {
            background-image: url(/Image/menu/zoomin.png);
        }
        #menu .item.zoomOut
        {
            background-image: url(/Image/menu/zoomout.png);
        }
        #menu .item.centerHere
        {
            background-image: url(/Image/menu/here.png);
        }
        #menu .item.hover
        {
            background-color: #d6e9f8;
        }
        #menu .item.separator
        {
            border-bottom: 1px solid #cccccc;
        }
    </style>
    <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="/Scripts/gmap3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        /**************************************************
        *                      Generic class Menu
        **************************************************/
        function Menu($div) {
            var that = this;
            var ts = null;
            this.$div = $div;
            this.items = [];

            // create an item using a new closure
            this.createMenu = function (item) {
                var $item = $('<div class="item ' + item.cl + '">' + item.label + '</div>');
                $item
                // bind click on item
                .click(function () {
                    if (typeof (item.fnc) === 'function') {
                        item.fnc.apply($(this), []);
                    }
                })
                // manage mouse over coloration
                .hover(
                    function () { $(this).addClass('hover'); },
                    function () { $(this).removeClass('hover'); }
                );
                return $item;
            }
            // clear timeout
            this.clearTs = function () {
                if (ts) {
                    clearTimeout(ts);
                    ts = null;
                }
            }
            // init timeout
            this.initTs = function (t) {
                ts = setTimeout(function () { that.close(); }, t);
            }
        }

        // Add item to menu
        Menu.prototype.add = function (label, cl, fnc) {
            this.items.push({
                label: label,
                fnc: fnc,
                cl: cl
            });
        }

        // Close previous (If having) and open a new menu 
        Menu.prototype.open = function (event) {
            this.close();
            var k,
            that = this,
            offset = {
                x: 0,
                y: 0
            },
            $menu = $('<div id="menu"></div>');

            // add items in menu
            for (k in this.items) {
                $menu.append(this.createMenu(this.items[k]));
            }

            // manage auto-close menu on mouse hover / out
            $menu.hover(
              function () { that.clearTs(); },
              function () { that.initTs(3000); }
            );

            // change the offset to get the menu visible (#menu width & height must be defined in CSS to use this simple code)
            if (event.pixel.y + $menu.height() > this.$div.height()) {
                offset.y = -$menu.height();
            }
            if (event.pixel.x + $menu.width() > this.$div.width()) {
                offset.x = -$menu.width();
            }

            // use menu as overlay
            this.$div.gmap3({
                action: 'addOverlay',
                latLng: event.latLng,
                content: $menu,
                offset: offset
            });

            // start auto-close
            this.initTs(5000);
        }

        // Close the menu
        Menu.prototype.close = function () {
            this.clearTs();
            this.$div.gmap3({ action: 'clear', name: 'overlay' })
        }

        /**************************************************
        *                      Main
        **************************************************/
        $(function () {
            var $map = $('#googleMap'),
                  menu = new Menu($map),
                  currentPointer,
                  center = [10.76356, 106.682351];

            // MENU : ITEM 1
            menu.add('Submenu 01', 'itemB',
            function () {
                menu.close();
                //addMarker(false);
            })

            // MENU : ITEM 2
            menu.add('Submenu 02', 'itemA separator',
            function () {
                menu.close();
                //addMarker(true);
            })

            // INIT GMAP
            $map.gmap3(
            {// Declare init function
                action: 'init',
                options: { center: center, zoom: 15 },
                events: {
                    rightclick: function (map, event) {
                        currentPointer = event;
                        menu.open(currentPointer);
                    },
                    click: function () {
                        menu.close();
                    },
                    dragstart: function () {
                        menu.close();
                    },
                    zoom_changed: function () {
                        menu.close();
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="directions">
        </div>
        <div id="googleMap">
        </div>
    </div>
    </form>
</body>
</html>
